<div class="pannel-default">
    <nz-tabset [nzTabBarExtraContent]="extraTemplate">
        <nz-tab [nzTitle]="'系统角色列表'">
            <nz-table #nzTable [nzData]="roleList" [nzLoading]="tableLoading">
                <thead>
                    <tr>
                        <th>角色名称</th>
                        <th>角色描述</th>
                        <th>创建时间</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of nzTable.data">
                        <td>{{ data.name }}</td>
                        <td>{{ data.memo }}</td>
                        <td>{{ data.createTime }}</td>
                        <td><nz-tag *ngIf="data.status === 'Y'" [nzColor]="'#87d068'">启用</nz-tag><nz-tag *ngIf="data.status !== 'Y'" [nzColor]="'#f50'">禁用</nz-tag></td>
                        <td><a style="margin-right:10px;">删除</a><a (click)="editRole(data)">编辑权限</a></td>
                    </tr>
                </tbody>
            </nz-table>
            <nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="'新增角色'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
                <form nz-form [formGroup]="validateForm">
                    <nz-form-item>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">角色名称</nz-form-label>
                        <nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.name">
                            <input nz-input id="name" formControlName="name" placeholder="请输入角色名称" />
                            <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">角色名称不能为空！</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo" nzRequired>角色描述</nz-form-label>
                        <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('memo')">
                            <input nz-input id="memo" formControlName="memo" placeholder="请输入角色描述" />
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </nz-modal>
        </nz-tab>
    </nz-tabset>
    <ng-template #extraTemplate>
        <button nz-button nzType="primary" (click)="addRole()">创建角色</button>
    </ng-template>
</div>
